<template>
  <div id="demo">
    <div ref="mychart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { checkpiechart } from "@/api/system/piechart";


export default {
  data() {
    return {
      chartData: [], // 存储后端返回的数据
      name: '',
      price: ''
    };
  },
  mounted() {
      this.myEcharts = echarts.init(document.querySelector('#demo'))
      this.myEcharts.setOption({
        title: {
          text: '数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '数据统计',
            type: 'pie',
            radius: '50%',
            data: [], // 使用chartData渲染饼图
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      this.getData()
  },
  methods: {
    getData() {
      checkpiechart().then(response => {
        const data = response.data;
        this.chartData = [
          { value: data.serviceCount , name: '公共服务内容'},
          { value: data.classroomCount, name: '第二课堂内容',},
          { value: data.educationCount , name: '产教融合内容'}
        ];
        this.myEcharts.setOption({
          series: [{
            data:this.chartData
          }]
        })
      });
    }
  }
};
</script>

<style scoped>
#demo {
  width: 600px;
  height: 600px;
  padding: 30px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
